<template>
	<view class="tourItem">
		<view class="tour_img" @tap="goDetails"><image :src="itemData.cover" mode="aspectFill"></image></view>
		<view class="tour_bottom_info_box">
			<view class="tour_name">{{ itemData.name }}</view>
			<view class="tour_price fn-cl-F34035">
				<span class="fn-sz-22">￥</span>
				<span class="fn-sz-30">{{ itemData.min_price }}</span>
				<span class="fn-sz-36">-</span>
				<span class="fn-sz-22">￥</span>
				<span class="fn-sz-30">{{ itemData.max_price }}</span>
			</view>
			<view class="tour_inner_bottom_box">
				<view class="tour_sale_num fn-cl-999999 fn-sz-24">
					<span class="mar-right-4">已售</span>
					<span>{{ itemData.sale_num }}</span>
				</view>
				<view class="reserve_btn" @tap="bookInOpen">预定</view>
			</view>
		</view>
		<!-- 规格模态框 -->
		<u-popup :show="skuListShow" mode="bottom" title="规格选择" @close="skuListClose" :round="10">
			<view class="skuListShowModel">
				<view class="travel_group_list">
					<view class="travel_group_item" v-for="(item, index) in tourDetails.option" :key="index">
						<view class="travel_group_top_box">
							<view class="travel_group_left_info">
								<view class="fn-sz-30 fn-cl-333333 mar-bottom-18">{{ item.option_name }}</view>
								<view class="travel_group_price_box">
									<view class="now_pirce fn-cl-F34035 mar-right-20">
										<span class="fn-sz-22">￥</span>
										<span class="fn-sz-36">{{ item.price }}</span>
									</view>
									<view class="sale_num">
										<span class="fn-sz-24 fn-cl-666666">已售:{{ item.sale_num }}</span>
									</view>
								</view>
							</view>
							<view class="travel_group_right_buybtn"><button @tap="bookIn(item)">预定</button></view>
						</view>
						<view class="travel_group_bottom_info_box">
							<view class="explain_btn" @tap="optionsDescription(item)">
								<span class="fn-sz-24 fn-cl-666666 mar-right-10">套餐说明</span>
								<image src="../static/images/icon/icon_moer_btn.png" class="icon-30" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 套餐说明 -->
		<u-popup :show="optionsDescShow" mode="bottom" @close="optionsDescClose" :round="10">
			<view class="optionsDescModel">
				<view class="optionsDescModel_inner_top">
					<view></view>
					<view class="fn-sz-34 fn-cl-333333">套餐说明</view>
					<image class="icon-30" @tap="optionsDescShow = false" src="../static/images/icon/icon_gary_radios_fill.png" mode=""></image>
				</view>
				<view class="desc_box_text">
					<span class="fn-sz-28 fn-cl-666666">{{ curOptionsDesc }}</span>
				</view>
			</view>
		</u-popup>
		<!-- 选择规格 -->
		<u-popup :show="skuShow" mode="bottom" @close="skuClose" :round="10">
			<view class="skuModel">
				<view class="skuModel_inner_top">
					<view class="fn-sz-24 fn-cl-333333">已选规格</view>
					<image @tap="skuClose" class="icon-30" src="../static/images/icon/icon_gary_radios_fill.png" mode=""></image>
				</view>
				<view class="sku_big_num_box">
					<view class="sku_big_num_box_title">{{ curBookInOptions.option_name }}</view>
					<view class="sku_num_box">
						<span class="fn-sz-22 fn-cl-F34035">￥</span>
						<span class="fn-sz-30 fn-cl-F34035">{{ curBookInOptions.price }}</span>
						<view class="btn_box">
							<image class="icon-40" src="../static/images/icon/icon_del_btn.png" mode="" @tap="countFunc(false)"></image>
							<view class="num_box">{{ buyNum }}</view>
							<image class="icon-40" src="../static/images/icon/icon_add_btn.png" mode="" @tap="countFunc(true)"></image>
						</view>
					</view>
				</view>
				<view class="sku_inner_row_box">
					<view class="sku_inner_row_title">联系人</view>
					<view class="sku_inner_input_box"><input v-model="tourSubmitObj.contact" type="text" placeholder="请输入联系人姓名" /></view>
				</view>
				<view class="sku_inner_row_box">
					<view class="sku_inner_row_title">联系电话</view>
					<view class="sku_inner_input_box"><input v-model="tourSubmitObj.telphone" type="text" placeholder="请输入联系电话" /></view>
				</view>
				<view class="sku_inner_row_box">
					<view class="sku_inner_row_title">地址</view>
					<view class="sku_inner_input_box"><input v-model="tourSubmitObj.address" type="text" placeholder="请输入地址" /></view>
				</view>
				<view class="sku_bottom_box">
					<view class="sku_bottom_left_box">
						<span class="fn-sz-26 mar-right-10">合计:</span>
						<span class="fn-sz-22 fn-cl-F34035">￥</span>
						<span class="fn-sz-30 fn-cl-F34035">{{ curBookInOptions.price * buyNum }}</span>
					</view>
					<view class="sku_bottom_right_box" @tap="submitCreateOrder">立即结算</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'tourItem',
	props: {
		itemData: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			optionsDescShow: false,
			skuShow: false,
			skuListShow: false,
			curOptionsDesc: '',
			curBookInOptions: {},
			buyNum: 1,
			tourDetails: {},
			tourSubmitObj: {
				contact: '',
				telphone: '',
				address: ''
			}
		};
	},
	methods: {
		goDetails() {
			uni.navigateTo({
				url: `/pages/travel/travelDetails?tour_id=${this.itemData.id}`
			});
		},
		bookInOpen() {
			this.$api.getTourDetail({ tour_id: this.itemData.id }).then(res => {
				if (res.code == 1) {
					this.tourDetails = res.data;
					this.skuListShow = true;
				}
			});
		},
		bookIn(item) {
			this.curBookInOptions = item;
			this.skuShow = true;
		},
		skuClose() {
			this.skuShow = false;
			this.buyNum = 1;
			this.tourSubmitObj = {
				contact: '',
				telphone: '',
				address: ''
			};
		},
		countFunc(num) {
			if (num) {
				this.buyNum += 1;
			} else {
				if (this.buyNum > 1) {
					this.buyNum -= 1;
				}
			}
		},
		skuListClose() {
			this.skuListShow = false;
		},
		//关闭优惠券模态框
		optionsDescClose() {
			console.log('关闭咯');
			this.optionsDescShow = false;
		},
		//开启
		optionsDescOpen() {
			console.log('开启咯');
			this.optionsDescShow = true;
		},
		optionsDescription(item) {
			this.optionsDescOpen();
			this.curOptionsDesc = item.desc;
		},
		submitCreateOrder() {
			this.$api.createTourOrder({ tour_id: this.itemData.id, option_id: this.curBookInOptions.id, num: this.buyNum, ...this.tourSubmitObj }).then(res => {
				console.log(res, '景区下单结果');
				this.$helper.toast(res.msg);
				if (res.code == 1) {
					uni.navigateTo({
						url: `/pages/orderPay/tourOrderPay?order_id=${res.data.order_id}`
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.tourItem {
	width: 340rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	.tour_img {
		margin-bottom: 10rpx;
		image {
			width: 340rpx;
			height: 340rpx;
			border-radius: 10rpx;
			object-fit: scale-down;
		}
	}
	.tour_bottom_info_box {
		padding: 12rpx 12rpx 25rpx;
		.tour_name {
			font-size: 28rpx;
			font-weight: 400;
			color: #222222;
			margin-bottom: 18rpx;
			height: 80rpx;
			overflow: hidden;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
		.tour_price {
			margin-bottom: 14rpx;
		}
		.tour_inner_bottom_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 12rpx;
			.tour_sale_num {
			}
			.reserve_btn {
				background: #fed100;
				font-size: 26rpx;
				padding: 4rpx 15rpx;
				border-radius: 8rpx;
			}
		}
	}
	.skuListShowModel {
		.travel_group_list {
			.travel_group_item {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 24rpx 22rpx;
				margin-bottom: 20rpx;
				.travel_group_top_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;
					.travel_group_left_info {
						.travel_group_price_box {
							display: flex;
							align-items: center;
							.now_pirce {
							}
							.sale_num {
							}
						}
					}
					.travel_group_right_buybtn {
						button {
							width: 130rpx;
							height: 70rpx;
							background: #fed100;
							border-radius: 40rpx;
							font-size: 30rpx;
							font-weight: 400;
							color: #333333;
							line-height: 70rpx;
						}
					}
				}
				.travel_group_bottom_info_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 14rpx;
					.explain_btn {
						display: flex;
						align-items: center;
					}
					.buy_need_know_btn {
						text-decoration: underline;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}
	}
	.optionsDescModel {
		background: #ffffff;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 30rpx 20rpx;
		min-height: 50vh;
		.optionsDescModel_inner_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 25rpx;
		}
	}
	.skuModel {
		padding: 24rpx;
		.skuModel_inner_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}
		.sku_big_num_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 40rpx;
			margin-bottom: 50rpx;
			.sku_big_num_box_title {
				font-size: 28rpx;
				color: #333;
				line-height: 40rpx;
			}
			.sku_num_box {
				display: flex;
				align-items: center;
				.btn_box {
					display: flex;
					align-items: center;
					margin-left: 30rpx;
					.num_box {
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}
			}
		}
		.sku_inner_row_box {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.sku_inner_row_title {
				width: 140rpx;
				flex: none;
				font-size: 28rpx;
				color: #333;
			}
			.sku_inner_input_box {
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				background-color: #f9f9f9;
				border-radius: 6rpx;
				padding: 15rpx 25rpx;
				input {
					color: #999999;
					font-size: 28rpx;
				}
			}
		}
		.sku_bottom_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.sku_bottom_left_box {
			}
			.sku_bottom_right_box {
				background: #fed100;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				border-radius: 45rpx;
				padding: 16rpx 30rpx;
			}
		}
	}
}
</style>
